<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerQuery"
    title="精确查询条件"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :minHeight="400"
    :width="800"
  >
    <Row>
      <Col :span="12"
        ><div style="overflow-y: scroll; overflow-x: hidden; height: 400px">
          <BasicTree :treeData="treeData" :toolbar="true" :search="true" @select="selectTree"
        /></div>
      </Col>
      <Col :span="12">
        <BasicTable @register="registerTable">
          <!-- 属性值 -->
          <template #value="{ record }">
            <a-input v-model:value="record.value" placeholder="请输入属性值" />
          </template>
        </BasicTable>
      </Col>
    </Row>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicTree } from '/@/components/Tree/index';
  import { Row, Col } from 'ant-design-vue';
  import { getExactColumns } from './data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { GetPartTypePropList } from '/@/api/demo/system';

  const { createMessage } = useMessage();
  const emit = defineEmits(['register', 'success']);
  const treeData = ref<any>([]);
  const selectedTreeKey = ref<string>('');

  const selectTree = async (selectedKeys) => {
    selectedTreeKey.value = selectedKeys[0];
    const res = await GetPartTypePropList(selectedTreeKey.value);
    const newData = res
      .filter((item) => item.isSelect !== '0')
      .map((item) => {
        return {
          ...item,
          value: '',
        };
      });
    setTableData(newData);
  };

  const handleSubmit = () => {
    emit('success', getDataSource());
    handleCancel();
  };

  const handleCancel = () => {
    selectedTreeKey.value = '';
    closeModal();
  };

  const [registerQuery, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    // 获取零件类型
    treeData.value = data.partClassList;
  });

  // 初始化表格
  const [registerTable, { setTableData, getDataSource }] = useTable({
    columns: getExactColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 10, pageSizeOptions: ['10', '20', '30'], defaultPageSize: 10 },
    canResize: true,
    scroll: { y: 350 },
    rowKey: 'prop',
  });
</script>

<style scoped></style>
